<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对React的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
        <Left />
        <Right />  
    </div>
  </div>
</template>

<script>
import Left from './components/Left/index.vue'
import Right from './components/Right/index.vue'
  export default {
    name:'App',
    components:{
      Left,
      Right
    },
    data(){
      return{
        msg:JSON.parse(localStorage.getItem('todo_key'))||[]
      }
    },

    watch:{
      msg:{
        handler(val){
          localStorage.setItem('todo_key',JSON.stringify(val))
        }
      }
    },

    mounted(){
      this.$bus.$emit('msg',this.msg)
      this.$bus.$on('addAll',this.addAll)
      this.$bus.$on('deleteAll',this.deleteAll)
    },
    methods: {
      addAll({name,content}){
        const todo = {
          name,
          content
        }
        this.msg.unshift(todo)
      },
      deleteAll(index){
        this.msg.splice(index,1)
      }
    }
  }
</script>

<style scoped>
 
</style>